<template>
  <div id="app">
    <h2>计算属性</h2>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>
    <p>{{ fullName }}</p>

    <h2>方法</h2>
    <p>{{ getFullName() }}</p>
    <p>{{ getFullName() }}</p>
    <p>{{ getFullName() }}</p>

    <h2>修改计算属性</h2>
    <input v-model="xing" /> + <input v-model="ming" /> =
    <input v-model="fullName" />
  </div>
</template>

<script>
export default {
  // data放数据
  data () {
    return {
      xing: '张',
      ming: '三'
    }
  },
  // 计算属性，写到computed里面。
  computed: {
    // fullName () {
    //   console.log('计算属性')
    //   return this.xing + this.ming // 计算属性要求，必须返回计算的结果
    // }
    fullName: {
      get () {
        // 当使用计算属性的时候，get方法就执行了
        return this.xing + ' ' + this.ming
      },
      set (val) {
        // 当修改计算属性的时候，set方法执行，并且形参 val 表示修改后的值
        // console.log(val) // 诸葛 亮
        const arr = val.split(' ') // ['诸葛', '亮']
        this.xing = arr[0]
        this.ming = arr[1]
      }
    }
  },
  // 方法，放到methods中
  methods: {
    getFullName () {
      console.log('方法')
      return this.xing + this.ming
    }
  }
}
</script>

<style></style>
